<template>
  <div id="secondcomponent">
    <h1>I am another page</h1>
    <el-card class="box-card">
        <div slot="header" class="clearfix">
          <h1 style="line-height: 36px; color: #20A0FF">DoubanRenking</h1>
        </div>
        <div v-for="article in articles" class="text item">
          {{article.title}}
        </div>
    </el-card>
    <a> written by {{ author }} </a>
    <p> thankes for <a href="https://github.com/showonne">showonne</a> tech support .</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      author: "wechatID jinkey-love",
      articles: [],
    }
  },
  mounted: function() {
    this.$http.jsonp('https://api.douban.com/v2/movie/top250?count=10', {}, {
        headers: {

        },
        emulateJSON: true
    }).then(function(response) {
      //call back 

        this.articles = response.data.subjects
        // this.articles = response.data["subjects"] ok alse.

    }, function(response) {
        //error handle
        console.log(response)
    });
  }
}
</script>

<style>

</style>
